<template>
  <el-col :span="22" :offset="1">
    <el-card>
      <el-table
        :data="projects"
        style="width: 100%"
        max-height="370">
        <el-table-column
          fixed
          prop="pName"
          label="名称"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="pId"
          label="项目id"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="pCreateDate"
          label="创建时间"
          width="155">
        </el-table-column>
        <el-table-column
          prop="pEndDate"
          label="截止时间"
          width="155">
        </el-table-column>
        <el-table-column
          prop="pType"
          label="类型"
          width="auto"
          :filters="[{text:'大型',value:'大型'},{text:'中型',value:'中型'},{text:'小型',value:'小型'},{text:'微型',value:'微型'}]"
          :filter-method="filterByPro">
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="pType"-->
<!--          label="项目类型"-->
<!--          width="auto">-->
<!--        </el-table-column>-->
        <el-table-column
          prop="pModelManagerId"
          label="模型主管id"
          width="90">
        </el-table-column>
        <el-table-column
          prop="pRenderManagerId"
          label="渲染主管id"
          width="90">
        </el-table-column>

        <el-table-column
          prop="pAfterManagerId"
          label="后期主管id"
          width="90">
        </el-table-column>

        <el-table-column
          prop="pProjectStatus"
          label="项目状态"
          width="90"
          :filters="[{text:'已完成',value:'已完成'},{text:'暂停',value:'暂停'},{text:'中止',value:'中止'},{text:'进行中',value:'进行中'}]"
          :filter-method="filterByPro">
        </el-table-column>

        <el-table-column
          prop="pPeriodStatus"
          label="进度"
          width="90"
          :filters="[{text:'创建成功',value:'创建成功'},{text:'建模结束',value:'建模结束'},{text:'渲染结束',value:'渲染结束'},
          {text:'后期结束',value:'后期结束'},{text:'验收结束',value:'验收结束'}]"
          :filter-method="filterByPro">
        </el-table-column>

        <el-table-column
          label=""
          width="50">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.$index,projects)">编辑</el-button>
          </template>
        </el-table-column>

        <el-table-column
          label=""
          width="50">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="deleteRow(scope.$index,projects)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template>
        <el-dialog title="修改项目信息"  width="40%" :visible.sync="dialogFormVisible">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item size="small" label="项目名称">
              <el-input size="small" v-model="form.pName"></el-input>
            </el-form-item>
            <el-form-item size="small" label="项目截止时间yyyy-mm-dd">
              <el-input size="small" v-model="form.pEndDate"></el-input>
            </el-form-item>
            <el-form-item size="small" label="项目客户id">
              <el-input size="small" v-model="form.cId"></el-input>
            </el-form-item>

            <el-form-item size="small" label="项目类型">
              <template>
                <el-select v-model="form.pType" placeholder="请选择">
                  <el-option
                    v-for="item in projectTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-form-item>

            <el-form-item size="small" label="项目状态">
              <template>
                <el-select v-model="form.pProjectStatus" placeholder="请选择">
                  <el-option
                    v-for="item in projectStatus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
<!--              <el-input size="small" v-model="form.pProjectStatus"></el-input>-->
            </el-form-item>
            <el-form-item size="small" label="项目进度">
              <template>
                <el-select v-model="form.pPeriodStatus" placeholder="请选择">
                  <el-option
                    v-for="item in periodStatus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item size="small" label="模型工资">
              <el-input size="small" v-model="form.pModelWage"></el-input>
            </el-form-item>
            <el-form-item size="small" label="渲染工资">
              <el-input size="small" v-model="form.pRenderWage"></el-input>
            </el-form-item>
            <el-form-item size="small" label="后期工资">
              <el-input size="small" v-model="form.pAfterWage"></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="saveEdit">确认修改</el-button>
            <!--                <el-button type="primary" @click="dialogFormVisible = false">确认修改</el-button>-->
          </div>
        </el-dialog>
      </template>
    </el-card>

    <el-card style="margin-top: 10px">
      <el-button type="info" style="margin-left: 10px" @click="print">打印提交报表</el-button>
    </el-card>

  </el-col>
</template>

<script>
  import Global from '../../utils/global'
  var projectStatusMap = ['已完成','暂停','终止','进行中']
  var periodStatusMap = ['创建成功','建模结束','渲染结束','后期结束','验收结束']
  var typeMap = ['大型','中型','小型','微型']
  export default {
    name: 'ProjectManageSuper',
    data(){
      return {
        idx:-1,
        form:{
          pId:null,
          pName:null,
          pCreateDate: null,
          pEndDate: null,
          pType: null,
          cId:null,
          pModelManagerId: null,
          pModelStaff: null,
          pRenderManagerId: null,
          pRenderStaff:null,
          pAfterManagerId: null,
          pAfterStaff:null,
          pProjectStatus: null,
          pPeriodStatus: null,
          pModelWage: null,
          pRenderWage: null,
          pAfterWage: null,
        },
        input4search:'',
        glo:new Global,
        projects: [],
        dialogFormVisible: false,
        projectStatus:[{
          value:0,
          label:'已完成',
        },{
          value:1,
          label:'暂停',
        },{
          value:2,
          label:'中止',
        },{
          value:3,
          label:'进行中',
        }],
        periodStatus:[{
          value:0,
          label:'创建成功',
        },{
          value:1,
          label:'建模结束',
        },{
          value:2,
          label:'渲染结束',
        },{
          value:3,
          label:'后期结束',
        },{
          value:4,
          label:'验收结束',
        }],
        projectTypes:[{
          value:0,
          label:'大型',
        },{
          value:1,
          label:'中型',
        },{
          value:2,
          label:'小型',
        },{
          value:3,
          label:'微型',
        },]
      }
    },
    methods:{
      print(){
        var timestamp = (new Date()).valueOf();
        var token = md5("epms" + timestamp);
        window.open("http://47.92.227.185:8080/download/projectCsv?token="+token+"&timestamp="+timestamp)
        // var data = {}
        // this.glo.sendDate(this.glo.server+'download/wageCsv',data,null,"POST")
      },
      handleResDel(res){
        console.log(res)
        let feedBack = eval(res);
        console.log(feedBack)
        if (feedBack.code == 20000) {
          this.$message.success(`删除成功`);
          this.projects.splice(index, 1);
        }else{
          this.$message.error(`删除失败`);
          location.reload()
        }
      },
      deleteRow(index, projects) {
        this.idx = index;
        var data = projects[index]
        this.glo.sendDate(this.glo.server + "super/delProject", data, this.handleResDel,"POST")
      },
      filterByPro(value, row, column){
        const property = column['property'];
        return row[property] === value;
      },
      handleEdit(index,projects) {
        this.idx = index;
        this.form = projects[index];
        // console.log(projects[index]);
        this.dialogFormVisible = true;
        // this.glo.sendDate(this.glo.server + "frontDesk/getAllClient", data, this.handleRes,"POST")
      },
      saveEdit() {
        // this.projects[this.idx] = this.form;
        var project = this.form

        // console.log(this.form)
        project.pPeriodStatus = this.glo.PeriodStatus2Digit(project.pPeriodStatus)
        project.pProjectStatus = this.glo.ProjectStatus2Digit(project.pProjectStatus)
        project.pType = eval(this.glo.ProjectType2Digit(project.pType))
        console.log(project)
        this.glo.sendDate(this.glo.server + "admin/updateProject", project, this.handleResEdit,"POST")
        this.dialogFormVisible = false;
      },
      handleResEdit(res){
        console.log(res)
        let feedBack = eval(res);
        console.log(feedBack)
        if (feedBack.code == 20000) {
          this.$message.success(`第 ${this.idx + 1} 行记录修改成功`);
          location.reload()
        }else{
          this.$message.error(`修改失败`);
          location.reload()
        }
      },
      inserTable (line) {
        this.projects.push(
          {
            pName: line.pName,
            pId:line.pId,
            pType:typeMap[line.pType],
            pCreateDate:line.pCreateDate,
            pEndDate:line.pEndDate,
            cId:line.cId,
            pPeriodStatus:periodStatusMap[line.pPeriodStatus],
            pProjectStatus:projectStatusMap[line.pProjectStatus],
            pFileUrl:line.pFileUrl,
            pModelManagerId:line.pModelManagerId,
            pRenderManagerId:line.pRenderManagerId,
            pAfterManagerId:line.pAfterManagerId,
            pModelWage:line.pModelWage,
            pRenderWage:line.pRenderWage,
            pAfterWage:line.pAfterWage,
          }
        )
      },

      initProjectPage (res) {
        console.log(res)

        for (var line in res.data.commitLogList){
          this.inserTable(res.data.commitLogList[line])
        }
      },
      handleRes (res) {
        console.log(res);
        let feedBack = eval(res);
        if (feedBack.success == false) {//登录失败
          this.$message("项目列表获取失败");
          return;
        }
        this.$message.success("项目列表获取成功^^")
        this.initProjectPage(feedBack)
      },
    },
    mounted(){
      let data = {
        sId:JSON.parse(sessionStorage.getItem('StaffInfo')).sId
      }
      this.glo.sendDate(this.glo.server+'admin/getAllProject',data,this.handleRes,"POST")
    },
  }
</script>

<style scoped>

</style>
